<template>
  <div class="register_wrap">
    <div style="text-align: center"><h1>随心享</h1></div>
    <div class="form_warp">
      <el-form ref="formRef" :model="loginDate" class="demo-dynamic">
        <el-form-item prop="phone">
          <el-input
            placeholder="请输入电话号码"
            :prefix-icon="Iphone"
            v-model="loginDate.phone"
            @blur="confirmphone"
          />
        </el-form-item>
        <div v-if="vphone">格式不正确</div>
        <el-form-item prop="password">
          <!-- v-model 数据的双向绑定 -->
          <el-input
            type="password"
            placeholder="请输入3位密码"
            :prefix-icon="Lock"
            v-model="loginDate.password"
            @blur="confirmpassword"
          />
        </el-form-item>
        <div v-if="vpassword">格式不正确</div>
        <el-form-item prop="email">
          <!-- v-model 数据的双向绑定 -->
          <el-input
            placeholder="请输入QQ邮箱"
            :prefix-icon="Message"
            v-model="loginDate.email"
            @blur="confirmemail"
          />
        </el-form-item>
        <div v-if="vemail">格式不正确</div>
        <el-row>
          <el-form-item>
            <el-input
              type="text"
              placeholder="输入验证码"
              v-model="loginDate.code"
              style="width: 120px"
            />
            <el-button
              class="find_btn"
              type="primary"
              @click="send"
              round
              style="width: 100px"
              >发送验证码</el-button
            >
          </el-form-item>
        </el-row>
        <el-button
          class="register_btn"
          type="primary"
          @click="handleregister"
          round
          >注册</el-button
        >
      </el-form>
    </div>
  </div>
</template>

<script setup>
import { reactive, ref } from 'vue'
import { Iphone, Lock, Message } from '@element-plus/icons-vue'
import axios from 'axios'
import '../assets/css/all.css'
const loginDate = reactive({
  phone: '',
  password: '',
  email: '',
  code: ''
})
const vphone = ref(false)
const vpassword = ref(false)
const vemail = ref(false)
function confirmphone() {
  if (!/^1[0-9]{10}$/.test(loginDate.phone)) vphone.value = true
  else vphone.value = false
}
function confirmpassword() {
  if (!/^[a-zA-Z0-9]{6}$/.test(loginDate.password)) vpassword.value = true
  else vpassword.value = false
}
function confirmemail() {
  if (!/^[1-9][0-9]{4,10}@qq.com$/.test(loginDate.email)) vemail.value = true
  else vemail.value = false
}
function send() {
  axios({
    url: 'http://localhost:8080/mail/' + loginDate.email,
    method: 'get',
    contentType: 'application/json'
  }).then(function (response) {
    alert('发送成功')
  })
}
function handleregister() {
  axios({
    url: 'http://localhost:8080/user/register',
    method: 'post',
    contentType: 'application/json',
    data: {
      mail: loginDate.phone,
      phone: loginDate.email,
      pwd: loginDate.password,
      code: loginDate.code
    }
  }).then(function (response) {
    if (response.data.result === '验证码错误') alert('验证码错误')
    else if (response.data.result === '账户已注册') alert('账户已注册')
    else alert('注册成功')
    console.log(response.data.result)
  })
}
</script>

<style lang="scss">
.register_wrap {
  margin: 0;
  width: 100%;
  height: 100%;
  background-image: url('../assets/1.jpg');
  background-size: 100% 100%;
  background-attachment: fixed;
  position: relative;
}
.form_warp {
  position: fixed;
  // background: floralwhite;
  width: 220px;
  height: 300px;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
.register_btn {
  margin: 20px auto;
  display: block;
  width: 100%;
  height: 28px;
}
</style>
